<template>
  <div class="header-container">
      <div class="c-l">
          <i class="el-icon-s-fold" style="font-size:20px" v-if="!isCollapse" @click="SET_COLLAPSE(true)"></i>
          <i class="el-icon-s-unfold" style="font-size:20px" v-else @click="SET_COLLAPSE(false)"></i>
          <div class="breadcrumb">主页/商品管理</div>
      </div>
      <div class="c-r">
        <i class="el-icon-full-screen" style="font-size:20px" @click="handleScreenFull"></i>
        <el-dropdown>
            <span class="el-dropdown-link">
                {{user.account}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item>布局样式</el-dropdown-item>
                <el-dropdown-item @click.native="logout">安全退出</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
        <el-avatar :src="avatarUrl"></el-avatar>
      </div>
  </div>
</template>

<script>
import screenfull from 'screenfull'
import {createNamespacedHelpers} from 'vuex'
const {mapState,mapMutations}=createNamespacedHelpers('login')
const {mapState:mapMenuState,mapMutations:mapMenuMutations}=createNamespacedHelpers("menus")
export default {
    data(){
        return{
            avatarUrl:''
        }
    },
    computed:{
        ...mapState(['user']),
        ...mapMenuState(['isCollapse'])
    },
    mounted(){
        this.avatarUrl=process.env.VUE_APP_URL+this.user.avatar
    },
    methods:{
        ...mapMutations(['SET_USER']),
        ...mapMenuMutations(['SET_COLLAPSE']),
        handleScreenFull(){
            if(!screenfull.enabled){
                this.$message.warning('该浏览器不支持全屏')
            }
            //完成全屏效果
            screenfull.toggle()
        },
        logout(){
           this.SET_USER({})
           this.$router.push("/login")
        }
    }
}
</script>

<style lang="scss" scoped>
    .header-container{
        display: flex;
        justify-content: space-between;
        height: 100%;
        .c-l{
            box-sizing: border-box;
            display: flex;
            align-items:center;
            height: 100%;
            .breadcrumb{
                margin: 0 10px;
            }    
        }
        .c-r{
           width: 200px;
           display:flex;
           align-items: center;
           .el-dropdown{
             margin: 0 10px;
           }
        }
    }
</style>